<template>
  <div class="home-page">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="8" v-for="tool in tools" :key="tool.id">
            <el-card class="tool-card" @click="navigateToTool(tool.path)">
              <div class="tool-icon">
                <el-icon :size="40">
                  <component :is="getIconComponent(tool.icon)" />
                </el-icon>
              </div>
              <h2>{{ tool.name }}</h2>
              <p>{{ tool.description }}</p>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { iconComponents } from '@/store'
import type { Tool } from '@/store'

const store = useStore()
const router = useRouter()

const tools = computed(() => store.state.tools as Tool[])

const getIconComponent = (iconName: string) => {
  return iconComponents[iconName] || iconComponents.Document // 默认图标
}

const navigateToTool = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  width: 100vw;
  background: none;
  margin: 0;
  padding: 0;
}

.el-main {
  padding: 0;
}

.el-row {
  padding: 20px;
}

.tool-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
  border-radius: 12px;
  padding: 24px 16px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tool-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.2);
}

.tool-icon {
  margin: 0 0 16px 0;
  color: #409EFF;
  transition: transform 0.3s ease;
}

.tool-card:hover .tool-icon {
  transform: scale(1.1);
}

.tool-card h2 {
  margin: 0 0 12px 0;
  color: var(--el-text-color-primary);
  font-size: 18px;
  font-weight: 600;
  transition: color 0.3s ease;
}

.tool-card p {
  color: var(--el-text-color-regular);
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.8;
  transition: color 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .el-col {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 768px) {
  .el-col {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  .el-row {
    padding: 16px;
  }
  
  .tool-card {
    height: 160px;
    padding: 20px 16px;
  }
  
  .tool-card h2 {
    font-size: 16px;
  }
  
  .tool-card p {
    font-size: 13px;
  }
}

/* 暗色模式适配 */
html.dark .tool-card {
  background-color: var(--el-bg-color-overlay);
  border-color: var(--el-border-color);
}

html.dark .tool-card:hover {
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.15);
}
</style> 